﻿@using JsViewEngine
@model JsViewEngine.Demo.Models.MoviesViewModel

@{
    ViewBag.Title = "Using {{: }} or {{> }} to render data values with optional conversion or HTML encoding";
}

<h2>Using {{: }} or {{> }} to render data values with optional conversion or HTML encoding</h2>

<ul>
<li>{{:value}} does not convert. Used to render values that include html markup</li>
<li>{{loc:value}} Uses custom converter.</li>
<li>{{html:value}} Converts using built-in HTML encoder. (Better security, but slight perf cost)</li>
<li>{{>value}} Alternative syntax for built-in HTML encoder.</li>
</ul><br />
<div class="box label">
    <b>Note:</b> A common use for converters is to protect against injection attacks from untrusted data.
    <br />It is generally best to use <b>{{> }}</b> when rendering data within element content, if the data is not intended to provide markup for insertion in the DOM.
    <br />In the context of HTML attributes, other encoders can easily be registered, such as an attribute encoder, <b>{{attr: }}</b>.</div>

@JsTemplates.RenderTemplateBlock("movieSynopsisTemplate")

<table>
    <thead><tr><th>Title (loc:French)</th><th>No Convert</th><th>HTML Encode</th></tr></thead>
    <tbody id="movieList">
        <!-- All converters are in ~/Scripts/viewconverters.js, function: viewconverters() -->
        @Html.Partial("movieSynopsisTemplate", Model.Movies)
    </tbody>
</table>

@section scripts
{
    @Scripts.Render("~/bundles/jsrender")
    <script src="/Scripts/viewconverters.js" type="text/javascript"></script>
    
    <script type="text/javascript">
        var movies = @JsTemplates.ObjectToJson(Model.Movies);

        $.views.converters(viewconverters());
        
        $( "#movieList" ).html(
            $( "#movieSynopsisTemplate" ).render( movies )
        );
    </script>
}
